<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en" >
<head>
   <title>PlotKit.Canvas | liquidx</title>
   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
   <link href="http://media.liquidx.net/css/page.css" media="screen"
   rel="Stylesheet" type="text/css" />
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="http://media.liquidx.net/js/pngfix.js"></script>
<![endif]-->
   
<link href="doc.css" media="screen" rel="stylesheet" type="text/css" />

</head>

<body>
    <div id="body">
    <h1 class="header"><span>liquidx.net</span></h1>
    <div class="menu">
    <ul id="menu" class="code">
        <li class="tab" id="blog"><a href="http://www.liquidx.net/" title="blog/home">blog</a></li>
        <li class="tab" id="code"><a href="http://www.liquidx.net/code/" title="software i have written">software</a></li>
        <li class="tab" id="dev"><a href="http://projects.liquidx.net/" title="source code for my open source projects">dev</a></li>      
        <li class="tab" id="photos"><a href="http://recoil.org/~al/albums/" title="photos and videos">photos</a></li>
         <li class="tab" id="research"><a href="http://al.tse.id.au/research/" title="research profile">research</a></li>
         <li class="tab" id="links"><a href="http://www.liquidx.net/links/" title="my bookmarks">linkblog</a></li>
         <li class="tab" id="stats"><a href="http://stats.liquidx.net/" title="stats for various parts of my website">stats</a></li>
         <li class="tab" id="status"><a href="http://www.liquidx.net/status" title="weather report for alastair">status</a></li>
         <li class="tab" id="about"><a href="http://al.tse.id.au/" title="about alastair tse">aboutme</a></li>
    </ul>
    </div>

    <div id="content">
<div class="page doc api">

<p> <a href="PlotKit.html">PlotKit Home</a> | <a href="PlotKit.Renderer.html">&lt;&lt;</a> | <a href="PlotKit.SVG.html">&gt;&gt;</a> 
</p>

<h1> PlotKit Canvas</h1>
<p>This contains the CanvasRenderer, the default renderer and most well supported one used in PlotKit.
</p>
<p>It supports Safari 2, Firefox 1.5, Opera 9 and IE 6. Note that for IE6
   support, you will need iecanvas.htc which is included with PlotKit. 
</p>
<p>Please see the <a href="SVGCanvasCompat.html">Canvas/SVG Browser Support Status</a> for bugs
   with the Canvas implementation on different browsers.
</p>

<h2> PlotKit Canvas Extra Options</h2>
<p>In addition to the options outlined in <a href="PlotKit.Renderer.html">PlotKit.Renderer</a>, here are additional options that the CanvasRenderer supports.
</p>
<table>
  <thead>
    <tr><td>Option name</td><td>Description</td><td>Type</td><td>Default</td></tr>
  </thead>
 <tbody>
    <tr>
        <th>IECanvasHTC</th>
        <td>Path relative to the HTML document of the iecanvas.htc file.</td>
        <td>string</td>
        <td>iecanvas.htc</td>
    </tr>
    </tbody>
</table>


<h2> PlotKit Canvas Example</h2>
<pre><code>var options = {
    &quot;drawsBackground&quot;: true,
    &quot;drawYAxis&quot;: false,
    &quot;IECanvasHTC&quot;: &quot;contrib/iecanvas.htc&quot;
};

var layout = new Layout(&quot;bar&quot;, {});
layout.addDataset(&quot;squares&quot;, [[0, 0], [1, 1], [2, 4], [3, 9], [4, 16]]);
layout.evaluate()
var renderer = new CanvasRenderer($('canvas'), layout, options);
layout.render();
</code></pre>
<h2> PlotKit Canvas Events/Signals</h2>
<p>There is preliminary support for events in the CanvasRenderer. If <code>enableEvents</code> is set <code>true</code> in the options, you can hook into the <code>onmousemove</code>, <code>onclick</code>, <code>onmouseover</code> and <code>onmouseout</code> events via the MochiKit.Signal.connect. Note that you must have included MochiKit/Signal.js before instantiating the CanvasRenderer
</p>

<h2> PlotKit Canvas Notes</h2>

<h3> IE Support</h3>
<p>IE Support is done thanks to webfx's great iecanvas.htc which emulates
   part of the WHATWG canvas specification. Note that alpha values and
   clear() does not work in IE.
</p>
<p>Remember that iecanvas.htc <strong>must</strong> reside on the same domain as the
   HTML page itself.
</p>


</div>
</div>
    
    <div class="footer">
    
    syndicate site: 
    <a href="http://www.liquidx.net/blog/feed/atom/" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/img/feed_atom.png" class="feed" alt="atom feed" /></a>
    <a href="http://www.liquidx.net/blog/feed/rss/" title="feed for all posts on liquidx.net"><img src="http://media.liquidx.net/img/feed_rss.png" class="feed" alt="rss atom" /></a>
    <a href="http://www.liquidx.net/comments/feed/rss/" title="feed for all comments on liquidx.net"><img src="http://media.liquidx.net/img/feed_comm.png" class="feed" alt="comment feed" /></a>
    | (c)2002-2006
    <a href="http://al.tse.id.au/">alastair tse</a> <a href="http://creativecommons.org/licenses/by/2.5/">some rights reserved</a> | 
    
    
    </div>

</div>

   <script src="http://www.google-analytics.com/urchin.js"
   type="text/javascript"></script>
   <script type="text/javascript">
   _uacct = "UA-58117-1";
   urchinTracker();
   </script>

</body>
</html>
